<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       body,html{
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #000000;
}
table{
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}
thead{
    background: #3d444c;
    color: #ffffff;
}
td,th{
    border: 1px solid #e1e1e1;
    padding: 0;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
    </style>
</head>

<body>
    <!-- 填写标签 -->
    <table>
    <thead>
        <tr><th>id</th><th>price</th><th>sales</th></tr>
    </thead>
    <tbody id="jsList">
        <tr><td>1</td><td>10.0</td><td>800</td></tr>
        <tr><td>2</td><td>30.0</td><td>600</td></tr>
        <tr><td>3</td><td>20.5</td><td>700</td></tr>
        <tr><td>4</td><td>40.5</td><td>500</td></tr>
        <tr><td>5</td><td>60.5</td><td>300</td></tr>
        <tr><td>6</td><td>50.0</td><td>400</td></tr>
        <tr><td>7</td><td>70.0</td><td>200</td></tr>
        <tr><td>8</td><td>80.5</td><td>100</td></tr>
    </tbody>
</table>
    <script type="text/javascript">
/*
系统会在tbody中随机生成一份产品信息表单，完成sort函数，根据参数的要求对表单所有元素进行重新排序
1. type 为id price 或 sales， 分别对应第1~3列
2. order 为 asc升序 或 desc降序
3. 例如 sort('price', 'asc') 表示按照price列从第到高排序
4. 表格内容均为数字，每列数字均不会重复
 */
function sort(type, order) {  // 自定义字段排序， type为字段；order为排序方式
    const tbody = document.getElementById("jsList") // 取出待排序列表元素父节点
    const trs = Array.from(document.querySelectorAll("#jsList tr")) // 取出待排序元素
    let data = [];
    for (let i = 0; i < trs.length; i++) {
        let tds = Array.from(trs[i].childNodes);
        data.push({
            id: tds[0].innerHTML,
            price: tds[1].innerHTML,
            sales: tds[2].innerHTML,
            tr: trs[i]
        });
    }
    data.sort((a, b) => { // 表格内元素排序
        if (order == "asc") return a[type] - b[type];
        else if (order == "desc") return b[type] - a[type];
        else return 0;
    });

    tbody.innerHTML = ''; // 新建表格父节点
    data.forEach(item => { // 添加子节点
        tbody.appendChild(item.tr);
    });
    return data; // console 输入data元素
}
    </script>
</body>

</html>